<template>
  <div class="app">
    <Category>
      <h2>热门游戏列表</h2>
      <ul>
        <li v-for="g in games" :key="g.id">{{g.name}}</li>
      </ul>
    </Category>

    <Category>
      <h2>今日美食推荐</h2>
      <img :src="food">
    </Category>

    <Category>
      <h2>热门游戏列表</h2>
      <video controls :src="movie"></video>
    </Category>

  </div>
</template>

<script>
  import Category from './components/Category'

  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        games:[
          {id:'asdtrd1',name:'英雄联盟'},
          {id:'asdtrd2',name:'原神'},
          {id:'asdtrd3',name:'红色警戒'},
          {id:'asdtrd4',name:'斗罗大陆'}
        ],
        food:'http://49.232.112.44/images/food.jpg',
        movie:'http://49.232.112.44/video/movie.mp4'
      }
    },
  }
</script>

<style>
  .app {
    background-color: gray;
    padding: 10px;
    display: flex;
    justify-content: space-around;
  }
</style>